<template>
  <div p-5>
    <DynamicTable
      bordered
      :data-request="loadData"
      :columns="columns"
      row-key="id"
      @resize-column="handleResizeColumn"
      :pagination="false"
      :search="false"
    >
    </DynamicTable>

    <a-modal
      v-model:open="open"
      :title="title"
      :footer="showFooter"
      :maskClosable="false"
      @ok="handleOk"
    >
      <!-- <div class="myBox">
        <div class="titleBox">
          <img src="@/assets/images/userGrey.png" />
          <div>主办人</div>
        </div>
        <div class="userBox">
          <div class="nameBox">
            <img src="@/assets/images/userBlue.png" />
          </div>
        </div>
      </div> -->
      <div class="myBox" v-if="selectData.id != 4">
        <div class="titleBox">
          <img src="@/assets/images/userGrey.png" />
          <div>协办人</div>
        </div>
        <div class="userBox">
          <div class="nameBox">
            <img src="@/assets/images/userBlue.png" />
          </div>
        </div>
      </div>
      <div class="myBox" v-for="item in dataSource" :key="item.id">
        <div class="titleBox">
          <img src="@/assets/images/userGrey.png" />
          <div>{{ item.flowNode }}</div>
        </div>
        <div class="userBox">
          <div
            class="nameBox"
            v-if="typeNum == 1 || item.approveName != ''"
            @click.stop="handleAddUser(item)"
          >
            <img src="@/assets/images/userBlue.png" />
            <div class="name">{{ item.approveName || '暂未设置人员' }}</div>
            <img
              src="@/assets/images/close.png"
              v-if="typeNum == 2"
              style="width: 14px; height: 14px; margin-left: 12px"
              @click.stop="handleClose(item)"
            />
          </div>
          <div class="addBox" v-else @click="handleAddUser(item)">
            <img src="@/assets/images/add.png" />
          </div>
        </div>
      </div>
    </a-modal>

    <a-modal
      v-model:open="userVisible"
      :title="'人员选择'"
      :width="1000"
      :maskClosable="false"
      :destroyOnClose="true"
      @ok="handleUserOk"
    >
      <div class="mb-16px">
        <DynamicTable
          size="small"
          bordered
          :data-request="loadDataUser"
          :columns="userColumns"
          row-key="id"
          :row-selection="rowSelection"
          :search="false"
          :pagination="false"
        >
        </DynamicTable>
      </div>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
  // @ts-nocheck
  import { ref, reactive } from 'vue';
  import { Modal, message } from 'ant-design-vue';
  import { baseColumns, userColumns, type TableListItem } from './columns';
  import { getFlow, updateFlow, getUserByType } from '@/api/system/flow/index';
  import {
    useTable,
    type OnChangeCallbackParams,
    type TableColumn,
  } from '@/components/core/dynamic-table';
  import { useFormModal } from '@/hooks/useModal/index';
  import { Storage } from '@/utils/Storage';

  const [showModal] = useFormModal();
  const [DynamicTable, dynamicTableInstance] = useTable();
  const columns: TableColumn[] = [
    ...baseColumns,
    {
      title: '操作',
      align: 'left',
      width: 96,
      dataIndex: 'ACTION',
      actions: ({ record }) => [
        {
          label: '查看',
          onClick: () => openFlowModal(record, 1),
        },
        {
          label: '编辑',
          onClick: () => openFlowModal(record, 2),
        },
      ],
    },
  ];

  const loadData = async (
    params,
    onChangeParams: OnChangeCallbackParams,
  ): Promise<API.TableListResult> => {
    const data = [
      {
        id: 1,
        name: '案件处理审批',
      },
      {
        id: 2,
        name: '行政许可流程',
      },
      {
        id: 3,
        name: '任务审批',
      },
      {
        id: 4,
        name: '立案审批',
      },
    ];
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };

  const handleResizeColumn = (w, col) => {
    col.width = w;
  };
  interface DataItem {
    id: string;
    approveId: string;
    approveName: string;
    flowNode: string;
  }
  const open = ref(false);
  const title = ref('编辑流程');
  const typeNum = ref(1);
  const showFooter = ref();
  const dataSource = ref([] as DataItem[]);
  const selectData = ref({} as any);
  const openFlowModal = (record: Partial<TableListItem> = {}, type: number) => {
    typeNum.value = type;
    selectData.value = record;
    if (type == 1) {
      title.value = '查看详情';
      showFooter.value = null;
    } else {
      title.value = '编辑流程';
      showFooter.value = undefined;
    }
    getFlow(record.id).then((res) => {
      dataSource.value = res;
      open.value = true;
    });
  };

  const userVisible = ref(false);
  const loadDataUser = async (
    params,
    onChangeParams: OnChangeCallbackParams,
  ): Promise<API.TableListResult> => {
    // 未解决
    let userType = '';
    if (selectItem.value.flowNode == '大队法制') {
      userType = 3;
    } else if (selectItem.value.flowNode == '大队长') {
      userType = 4;
    } else if (selectItem.value.flowNode == '技术复核') {
      userType = 3;
    } else if (selectItem.value.flowNode == '承办单位') {
      userType = 2;
    } else if (selectItem.value.flowNode == '法制审核') {
      userType = 3;
    }
    const deptId = Storage.get('userInfo').deptId;
    const data = await getUserByType(deptId, userType);
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };
  const rowSelection = ref({
    selectedRowKeys: [] as number[],
    selectedRows: [] as object[],
    onChange: (selectedRowKeys: number[], selectedRows: TableListItem[]) => {
      rowSelection.value.selectedRowKeys = selectedRowKeys;
      rowSelection.value.selectedRows = selectedRows;
    },
    type: 'radio',
  });
  const selectItem = ref({});
  const handleAddUser = (item) => {
    if (typeNum.value == 1) return;
    userVisible.value = true;
    selectItem.value = item;
  };
  const handleClose = (item) => {
    item.approveId = '';
    item.approveName = '';
  };
  const handleUserOk = () => {
    if (!rowSelection.value.selectedRowKeys.length) return message.info(`请选择人员`);
    dataSource.value.map((item) => {
      if (item.flowNode == selectItem.value.flowNode) {
        item.approveId = rowSelection.value.selectedRowKeys[0].toString();
        item.approveName = rowSelection.value.selectedRows[0].userName;
      }
    });
    userVisible.value = false;
  };
  const handleOk = () => {
    updateFlow(dataSource.value).then((res) => {
      message.success('设置成功');
      open.value = false;
    });
  };
</script>
<style scoped lang="less">
  .myBox {
    margin-bottom: 4px;
    color: #444;
    font-size: 14px;
    font-weight: 500;

    .titleBox {
      display: flex;
      align-items: center;
      margin-bottom: 4px;

      img {
        width: 20px;
        height: 20px;
        margin-right: 16px;
      }
    }

    .userBox {
      display: flex;
      margin-left: 9px;
      padding: 4px 0 12px 24px;
      border-left: 2px solid #f0f0f0;

      .nameBox {
        display: flex;
        align-items: center;
        padding: 12px;
        border: 1px solid #f0f0f0;
        border-radius: 4px;
        background-color: #f5f6f7;

        img {
          width: 28px;
          height: 28px;
        }

        .name {
          font-weight: 400;
          margin-left: 4px;
        }
      }

      .addBox {
        padding: 18px;
        border: 1px solid #f0f0f0;
        border-radius: 4px;
        background-color: rgb(23 100 206 / 10%);

        img {
          display: block;
          width: 18px;
          height: 18px;
        }
      }
    }
  }

  .myBox:last-child {
    .userBox {
      margin-left: 10px;
      border: none;
    }
  }
</style>
